<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
    <title>面试作品</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/swiper-3.3.1.min.css"/>
    <!-- 兼容普通的尺寸 -->
     	<style type="text/css">
        html {
        font-size : 20px;
        }
        @media only screen and (min-width: 401px){
                html {
                    font-size: 25px !important;
                }
            }
            @media only screen and (min-width: 428px){
                html {
                    font-size: 26.75px !important;
                }
            }
            @media only screen and (min-width: 481px){
                html {
                    font-size: 30px !important;
                }
            }
            @media only screen and (min-width: 569px){
                html {
                    font-size: 35px !important;
                }
            }
            @media only screen and (min-width: 641px){
                html {
                    font-size: 40px !important;
                }
            }
    </style>
</head>

<body>
<!--<div style="margin: 0px;padding:0px">Rem响应式兼容</div>-->
<!--<div style="width: 2rem;height: 2rem;background: red;"></div>-->
<div class="cfs_layout">
    <!--头部-->
    <header class="cfs_header">
        <div class="cfs_header_box">
            <div class="cfs_header_one">崇福寺在线功能</div>
            <div class="cfs_header_two">已捐100笔</div>
        </div>
    </header>
    <!--轮播图-->
    <div class="cfs_banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background: #b9def0;">
                    <div class="swiper-slide_font">
                        周三日行一善，随喜供养！虔诚供养10元，功德无量。<br>
                        周三日行一善，随喜供养！虔诚供养10元，功德无量。<br>
                        周三日行一善，随喜供养！虔诚供养10元，功德无量。
                    </div>
                </div>
                <div class="swiper-slide" style="background: deepskyblue;">
                    <div class="swiper-slide_font">
                        周三日行一善，随喜供养！虔诚供养10元，功德无量。<br>
                        周三日行一善，随喜供养！虔诚供养10元，功德无量。<br>
                        周三日行一善，随喜供养！虔诚供养10元，功德无量。
                    </div>
                </div>
                <div class="swiper-slide" style="background: #39b3d7">
                    <div class="swiper-slide_font">
                        周三日行一善，随喜供养！虔诚供养10元，功德无量。<br>
                        周三日行一善，随喜供养！虔诚供养10元，功德无量。<br>
                        周三日行一善，随喜供养！虔诚供养10元，功德无量。
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="cfs_title">
        <!--标题-->
       <div class="cfs_title_tit">
            <h4>添砖加瓦</h4>
       </div>
        <!--导航栏-->
        <nav class="cfs_nav">
            <ul class="clearfix">
                <li>
                    <a href="#">
                        <img src="images/nav0.png" alt=""/>
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav1.png" alt=""/>
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav2.png" alt=""/>
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav3.png" alt=""/>
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav4.png" alt=""/>
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav5.png" alt=""/>
                        <p>分类查询</p>
                    </a>
                </li>
            </ul>
        </nav>

    </div>
<script src="js/swiper-3.3.1.min.js"> </script>
<script>
    //轮播图
    window.onload = function(){
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'vertical',
            loop: true,
            autoplay : 5000,
            autoplayDisableOnInteraction : false,
        })
    }
</script>
</body>
</html>